$(function () {
  // 1.1 获取裁剪区域的 DOM 元素
  var $image = $("#image");
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".img-preview",
  };
const layer=layui.layer
  // 1.3 创建裁剪区域
  $image.cropper(options);
  //点击上传按钮,弹出文件选项
  $("#btnUpload").on("click", function () {
    $("#file").click();
  });

  //监听文件选择器的change事件
  $("#file").on("change", function (e) {
    // 获取用户选择的文件
    console.log(e.target.files);
    const fileList = e.target.files;
    if (fileList.length <= 0) return layer.msg("请选择文件");

  // 1. 拿到用户选择的文件
  const file = e.target.files[0]
  // 2. 将文件，转化为路径
  const imgURL = URL.createObjectURL(file);
  //调用插件的方法,把图片展示在裁剪区域
  $image
    .cropper("destroy") // 销毁旧的裁剪区域
    .attr("src", imgURL) // 重新设置图片路径
    .cropper(options); // 重新初始化裁剪区域
});
//实现上传图片功能
$('#btnConfirm').on('click',function(){
    var dataURL = $image
.cropper('getCroppedCanvas', {
  // 创建一个 Canvas 画布
  width: 100,
  height: 100
}).toDataURL('image/png')
// console.log(dataURL);
$.ajax({
    url: '/my/update/avatar',
    type: 'POST',
    data: {
      avatar: dataURL
    },
    success(res) {
      if (res.status !== 0) {
        return layer.msg(res.message||'更换头像失败！')
      }
      layer.msg(res.message||'更换头像成功！')
      window.parent.getUserInfo()
    }
  })
})
});
